<template>
    <div v-if="loading" class="op-loading-view">
        <slot name="template">
            <div v-if="type === 'loading'" class="loading-wrapper">
                <van-loading/>
            </div>
            <div v-if="type ==='skeleton'" class="skeleton-wrapper">
                <van-skeleton :row="5" />
                <van-skeleton title avatar :row="3" />
                <van-skeleton title avatar :row="3" />
                <van-skeleton title avatar :row="3" />
            </div>
        </slot>    
    </div>
    <slot v-else></slot>

</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface IProps{
    loading: boolean;
    type:'loading' | 'skeleton'
}

defineProps<IProps>(); 


</script>

<style lang="scss" scoped>
.op-loading-view{
   .loading-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
   } 
   .skeleton-wrapper{
        padding: 20px 10px;
   }
   .van-skeleton{
       margin-bottom: 30px;
   }
}

</style>



